package org.anno.chunkdb;

import java.io.IOException;
import java.io.Writer;

/**
 * Renders a web page with overrideable methods for header and content. Sets up HTML with named
 * elements, #layout, #menu, and #menuLink, and class menu-link for
 * <a href='http://purecss.io/layouts/side-menu/'>side-menu layout from purecss</a>. Element
 * #menuLink is only for the menu toggle for narrow view ports.
 */
public class Page {

  protected final Writer out;
  private final String pageTitle;

  public Page(Writer out, String pageTitle) {
    this.out = out;
    this.pageTitle = pageTitle;
  }

  public void render() throws IOException {
    out.append("<html lang='en'>\n");
    out.append("<head>\n");
    out.append("  <meta charset='utf-8'>\n");
    out.append(
        "  <meta name='viewport' content='width=device-width, initial-scale=1.0'>\n");
    out.append("  <title>").append(pageTitle).append("</title>\n");
    out.append(
        "  <link rel='stylesheet' href='//yui.yahooapis.com/pure/0.4.2/pure-min.css'>\n");
    out.append("  <link rel='stylesheet' href='/stylesheets/side-menu.css'>\n");
    out.append("</head>\n");
    out.append("<body>\n");
    out.append("<div id='layout'>\n");
    out.append("  <!-- Menu toggle -->\n");
    out.append("  <a href='#menu' id='menuLink' class='menu-link'>\n");
    out.append("    <!-- Hamburger icon -->\n");
    out.append("    <span></span>\n");
    out.append("  </a>\n");
    out.append("  <div id='menu'>\n");
    out.append("    <div class='pure-menu pure-menu-open'>\n");
    out.append("      <a class='pure-menu-heading' href='#'>Tables</a>\n");
    out.append("      <ul>\n");
    out.append("        <li><a href='#'>Home</a></li>\n");
    out.append("        <li><a href='#'>About</a></li>\n");
    out.append("        <li class='menu-item-divided pure-menu-selected'>\n");
    out.append("          <a href='#'>Services</a>\n");
    out.append("        </li>\n");
    out.append("        <li><a href='#'>Contact</a></li>\n");
    out.append("      </ul>\n");
    out.append("    </div>\n");
    out.append("  </div>\n");
    out.append("  <div id='main'>\n");
    out.append("    <div class='header'>\n");
    out.flush();

    renderHeader();

    out.append("    </div>\n");
    out.append("    <div class='content'>\n");
    out.flush();

    renderContent();

    out.append("    </div>\n");
    out.append("  </div>\n");
    out.append("</div>\n");
    out.append("<script src='/ui.js'></script>\n");
    out.append("</body>\n");
    out.append("</html>\n");
    out.flush();
  }

  protected void renderHeader() throws IOException {
    out.append("      <h1>Edit Table</h1>\n");
    out.append("      <h2>Tell us about your table</h2>\n");
  }

  protected void renderContent() throws IOException {

  }
}
